<style scoped lang="scss">

</style>

<template>
  <div class="app-container">
    <el-table
      :data="HubBaseInfo.clients"
      fit
      highlight-current-row
      border
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column align="center" type="index" width="70" label="序号" />
      <el-table-column label="用户ID" prop="user.id" />
      <el-table-column label="用户账号" prop="user.name" />
      <el-table-column label="用户名称" prop="user.username" />
      <el-table-column label="用户手机号" prop="user.phone" />
      <el-table-column label="连接时间" prop="connTime" />
      <el-table-column label="连接失效时间" prop="heartbeatTimeout" />
      <el-table-column label="浏览器类型" prop="userAgent.browser" />
      <el-table-column label="系统" prop="userAgent.os" />
      <el-table-column label="用户Token" prop="user.rememberToken" min-width="120" />
      <el-table-column fixed="right" label="操作" width="150">
        <template v-slot="scope">
          <el-button v-waves type="danger" size="mini" icon="el-icon-switch-button" @click="clickClientLogout(scope.row)">强制退出</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { addMessageHandler, deleteMessageHandler, sendMessage, Events } from '@/utils/websocket'

export default {
  name: 'OnlineUser',
  data() {
    return {
      EvenTimer: null,
      HubBaseInfo: {
        clients: [],
        users: []
      }
    }
  },
  created() {
    // 让服务器推送运行时数据
    this.EvenTimer = setInterval(() => {
      sendMessage(Events.HubBaseInfo, '')
    }, 1000 * 3)

    // 接收websocket消息事件注册
    addMessageHandler(Events.HubBaseInfo, (message) => {
      this.HubBaseInfo = message.data
    })
  },
  beforeDestroy() {
    deleteMessageHandler(Events.HubBaseInfo)
    clearInterval(this.EvenTimer)
  },
  methods: {
    clickClientLogout(row) {
      console.log('clickClientLogout', row)
      sendMessage(Events.forceClientLogout, row.id, false)
    },
    clickUserLogout(row) {
      console.log('clickUserLogout', row)
      sendMessage(Events.forceUserLogout, row.id, false)
    }
  }
}
</script>
